<template>
	<div class="page">
		<div class="main">
			<div class="seach-filter">
				<XSearchFilterModule 
					:data="item" :scales="scales" :status="status" :index="index"
					v-for="(item,index) in searchFilterData"
					:key="index"
					ref="search"
					@on-search="clickSearch">
				</XSearchFilterModule>
				<XSearchFilterModule 
					:data="statusListData" :scales="scales"
					ref="status"
					@on-search="clickSearchStatus">
				</XSearchFilterModule>
			</div>
			<div class="movie-card" ref="movieCard">
				<XMovieCardView 
					:class="cardIndex === index? cardBg : ''"
					:data="item" :dimes="searchFilterData"
					v-for="(item, index) in movieListData" 
					:key="index" 
					@on-click="clickPreview(item, index)">
				</XMovieCardView>
			</div>
		</div>
		<div class="movie-detail" v-if="movieDetailData.isShow">
			<XMovieDetailView 
				:data="movieDetailData" :dimes="searchFilterData"
				@on-click-action="clickAction">
			</XMovieDetailView>
		</div>

		<!-- 开厅弹窗 -->
		<div v-if="openData.isShow">
			<XMovieOpenModal 
				:data="openData"
				@on-submit="submitOpen">
			</XMovieOpenModal>
		</div>
		<!-- 结算弹窗 -->
		<div v-if="clearingData.isShow">
			<XMovieClearingModal 
				:data="clearingData" :goodsList="clearingData.goodsList" :costDetailData="clearingData.costDetailData"
				@on-submit="submitClear">
			</XMovieClearingModal>
		</div>
		<!-- 续时 -->
		<div v-if="continueData.isShow">
			<XContinueModal 
				:data="continueData"
				@on-submit="submitContinue">
			</XContinueModal>
		</div>
		<!-- 转厅 -->
		<div v-if="transferData.isShow">
			<XTransferMovieModal 
				:data="transferData"
				@on-submit="submitTransfer">
			</XTransferMovieModal>
		</div>

		
	</div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import XSearchFilterModule from '@/components/XSearchFilterModule' //筛选

import XMovieCardView from '@/pages/movie/view/XMovieCardView' //影厅卡片
import XMovieDetailView from '@/pages/movie/view/XMovieDetailView' // 影厅详情

import XMovieOpenModal from '@/pages/movie/view/XMovieOpenModal' //开厅
import XMovieClearingModal from '@/pages/movie/view/XMovieClearingModal' //结算
import XContinueModal from '@/pages/movie/view/XContinueModal' //续时
import XTransferMovieModal from '@/pages/movie/view/XTransferMovieModal' //转厅
var timer = null;
export default {
	components: {
		XSearchFilterModule,
		XMovieCardView,
		XMovieDetailView,
		XMovieOpenModal,
		XMovieClearingModal,
		XContinueModal,
		XTransferMovieModal
	},
	data() {
		return {
			cardIndex: -1,
			cardBg: '',
			statusListData: {
				name: '状态',
				list: [],
				status: ''
			},
			scales: ['', ''],
			status: '',
			searchFilterData: [],
			movieListData: [],//影厅列表
			movieDetailData: { //影厅详情
				isShow: false,
				goodsList: [],
				data: {}
			},
			openData: { //开厅
				isShow: false,
				isLoading: false,
				data: {},
				row: null,
				lockTime: ''
			},
			clearingData: { //结算
				isShow: false,
				isLoading: false,
				data: {},
				orderData: {},
				goodsList: null,
				costDetailData: null,
				row: null,
			},
			continueData: { //续时
				isShow: false,
				isLoading: false,
				row: null,
				data: {
					hours: null
				}
			},
			transferData: { //转厅
				isShow: false,
				isLoading: false,
				data: {}
			}
		}
	},
	watch: {
		'movieDetailData.isShow': function(val) {
			if (val == false) {
				this.cardIndex = -1;
				this.cardBg = '';
			}
		},
		'openData.isShow': function(val) {
			let nowTime = new Date().getTime();
			let lockt = new Date(this.openData.lockTime).getTime();
			let time = lockt - nowTime - 1000;
			if (val == false) {
				clearInterval(timer);
				this.roomUnLock()
			} else {
				timer = setInterval(() => {
					this.roomLock();
				}, time)
			}
		},
		'clearingData.isShow': function (val) {
			if (val == false) {
				if (this.clearingData.orderData.money == 0) {
					this.getRoomList();
					this.getDimensions();
					this.$refs.status.getRoomStatusList();
				}
			}
			
		}
	},
	mounted() {
		this.getDimensions();
		this.getRoomList();
	},
	methods: {
		clickSearch(formData, index) {
			this.scales[index] = formData.did
			for(let i = 0; i < this.$refs.search.length; i++) {
				this.$refs.search[i].getDimensionDetails();
			}
			this.$refs.status.getRoomStatusList();
			this.getRoomList();
		},
		clickSearchStatus(formData) {
			this.status = formData.status;
			this.getRoomList();
		},
		clickPreview(item, index) {
			this.movieDetailData.isShow = true;
			this.movieDetailData.data = item;
			this.cardIndex = index;
			switch(item.status){
				case 1:
					this.cardBg = 'leisurebg';
				break;
				case 2:
					this.cardBg = 'clearbg';
				break;
				case 3:
					this.cardBg = 'usingbg';
					this.roomGoodsList(item);
				break;
				case 4:
					this.cardBg = 'maintainbg';
				break;
			}
		},
		clickAction(type, formData) {
			switch(type) {
				case '开厅': 
					this.openData.data = {
						id: null,
						phoneNum: null,
						name: null,
						isMember: null,
						memberId: null,
						cardNo: null,
						number: null,
						isBook: null,
						bookNo: null,
						hours: null,
						movie: null
					};
					this.roomLock('1');
					this.openData.row = formData;
				break;
				case '续时': 
					this.continueData.isShow = true;
					this.continueData.row = formData;
					this.continueData.data = {
						hours: null
					};
				break;
				case '转厅': 
					this.transferData.isShow = true;
					this.transferData.row = formData;
					this.transferData.data = {};
				break;
				case '结算': 
					this.roomCostDetail(formData);
					this.roomGoodsList(formData);
					this.roomSettle(formData)
				break;
				case '维修': 
					this.$Modal.confirm({
						title: '维修影厅',
						content: '是否维修该影厅？',
						onOk: () => {
							this.roomRepair(formData);
						}
					});
				break
				case '置闲': 
					this.roomFree();
				break
			}
		},
		submitOpen(params, formData) {
			this.$Modal.confirm({
				title: '确认开厅',
				content: '是否确认开厅？',
				onOk: () => {
					this.orderPayWay(params, formData);
				}
			});
		},
		submitContinue(params, formData) {
			this.$Modal.confirm({
				title: '确认续时',
				content: '是否确认续时？',
				onOk: () => {
					this.orderPayWay(params, formData);
				}
			});
		},
		submitTransfer(params, formData) {
			this.$Modal.confirm({
				title: '确认转厅',
				content: '是否确认转厅？',
				onOk: () => {
					this.orderPayWay(params, formData);
				}
			});
		},
		submitClear(params, formData) {
			this.$Modal.confirm({
				title: '确认结账',
				content: '是否确认结账？',
				onOk: () => {
					this.orderPayWay(params, formData);
				}
			});
		},

		getDimensions () {
			roomService.getDimensions().then(res =>{
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.searchFilterData = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		getRoomList() {
			let params = {
				scales: this.scales.join(','),
				status: this.status,
			}
			roomService.getRoomList(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.movieListData = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		roomLock (type) {
			roomService.roomLock(this.movieDetailData.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					if (type == '1') {
						this.openData.isShow = true;
					}
					this.openData.lockTime = resmsg;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomUnLock (type) {
			roomService.roomUnLock(this.movieDetailData.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomFree () {
			roomService.roomFree(this.movieDetailData.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.$Message.success('置闲成功');
					this.getRoomList();
					this.getDimensions();
					this.$refs.status.getRoomStatusList();
					this.movieDetailData.isShow = false;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomRepair() {
			roomService.roomRepair(this.movieDetailData.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.$Message.success('影厅已维修');
					this.getRoomList();
					this.getDimensions();
					this.$refs.status.getRoomStatusList();
					this.movieDetailData.isShow = false;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomSettle(formData) {
			roomService.roomSettle(formData.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.clearingData.isShow = true;
					this.clearingData.row = formData;
					this.clearingData.data = result.data;
					this.clearingData.orderData.money = result.data.willpay;
					result.data.orderList.map(item => {
						if (item.orderType == '6') {
							this.clearingData.orderData.oid = item.oid;
						}
					})
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomGoodsList(formData) {
			roomService.roomGoodsList(formData.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.clearingData.goodsList = result.data;
					this.movieDetailData.goodsList = [];
					result.data.map(item => {
						let obj = {
							name: item.name,
							money: item.money,
							number: item.number,
							sum: item.money * item.number,
							status: item.status == 0? '未支付': item.status == 1? '已支付': item.status == 2? '支付失败': item.status == 3? '支付取消': item.status == 4? '支付超时': '-/-'
						}
						this.movieDetailData.goodsList.push(obj)
					})
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		roomCostDetail(formData) {
			roomService.roomCostDetail(formData.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.clearingData.costDetailData = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			},error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		orderPayWay(params, formData) {
			formData.isLoading = true;
			roomService.orderPayWay(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg
				if (code == 100) {
					this.getRoomList();
					this.getDimensions();
					this.$refs.status.getRoomStatusList();
					formData.isLoading = false;
					formData.isShow = false;
					this.movieDetailData.isShow = false;
					this.$Message.success({
						content: '操作成功',
						duration: 3
					});
				} else {
					formData.isLoading = false;
					this.$Message.error(resmsg);
				}
			}, error => {
				formData.isLoading = false;
				this.$Message.error('服务器异常，请稍后再试');
			})
		}
	}
}
</script>

<style scoped lang="less">
.page {
	width: 100%;
	height: 100%;
	display: flex;
	color: #ffffff;
	.main {
		width: 100%;
		position: relative;
		.seach-filter {
			height: 1.6rem;
			margin-top: .2rem;
			margin-bottom: .1rem;
		}
		.movie-card {
			display: flex;
			flex-wrap: wrap;
			overflow: auto;
			// position: absolute;
			// top: 1.8rem;
			// left: 0;
			// right: 0;
			// bottom: 0;
		}
	}
	.movie-detail {
		height: 100%;
	}
	.leisurebg {
		background: #74CE6B;
	}
	.usingbg {
		background: #EF8B22;
	}
	.clearbg {
		background: #5CABF3;
	}
	.maintainbg {
		background: #B6BACE;
	}
}
</style>